
@rate: 1rem/40;

.background  {
  width: 100%;
  padding-top: 513 * @rate;
  background-repeat: no-repeat;
  background-size: 100% auto;
  overflow: hidden;
  background-image: url("http://xhd-lx-admin.oss-cn-hangzhou.aliyuncs.com/topic/gaokaohou/yazhou/bg.png");
  background-color: rgb(101,80,206);
  .bg-absolute {
    position: absolute;
  }
  #tab-box {
    display: none;
    height: 70 * @rate;
  }
  #tab::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
    width: 1200 * @rate;
    height: 70 * @rate;
    background-image: linear-gradient(-90deg, 
		rgba(159, 86, 203, 1) 0%, 
		#f988e7 100%);
    box-shadow: 0px 25 * @rate 27 * @rate 0px 
		#462fba;
    border-radius: 35 * @rate;
  }
  #tab .p-relative {
    z-index: 1;
  }
  .tab {
    width: 1200 * @rate;
    padding: 0 57 * @rate;
  }
  
  .tab.tab-fixed {
    position: fixed;
    top: 0;
    z-index: 999;
  }
  
  .tab-list {
    cursor: pointer;
    font-size: 18 * @rate;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70 * @rate;
  }
  .container {
    width: 1200 * @rate;
  }
  .se-title  {
    font-size: 60 * @rate;
    text-shadow: 0 5 * @rate 5 * @rate 
		rgba(91, 91, 91, 0.75);
    img {
      width: 156 * @rate;
      height: 53 * @rate;
      margin-top: 8 * @rate;
      &.se-img1-55 {
        margin-right: 55 * @rate;
      }
      &.se-img2-55 {
        margin-left: 55 * @rate;
      }
      &.se-img1-50 {
        margin-right: 50 * @rate;
      }
      &.se-img2-50 {
        margin-left: 50 * @rate;
      }
    }
  }
  .title-tips {
    font-size: 24 * @rate;
    margin: 33 * @rate 0 60 * @rate;
  }
  .btn {
    width: 420 * @rate;
    height: 60 * @rate;
    background-image: linear-gradient(180deg, 
		rgba(194, 135, 255, 1) 0%, 
		#684aff 100%);
	  box-shadow: 0px 25 * @rate 27 * @rate 0px 
		#462fba;
    border-radius: 30 * @rate;
    font-size: 20 * @rate;
    color: #fff;
  }
  .btn2 {
    margin-left: 40 * @rate;
    background-image: linear-gradient(180deg, 
		#0dccff 0%, 
		#4760ff 100%);
  }
  .swiper-container {
    padding-bottom: 50 * @rate;
    .swiper-pagination {
      bottom: 0;
      .swiper-pagination-bullet {
        width: 12 * @rate;
        height: 12 * @rate;
        background-color: #eeeeee;
        opacity: 1;
        &.swiper-pagination-bullet-active {
          width: 17 * @rate;
          height: 17 * @rate;
          border: solid 4 * @rate #05eefe;
          background: none;
        }
      }
    }
  }

  .section-background {
    background-color: #4f39bb;
  }

  .section1 {
    padding: 65 * @rate 0 60 * @rate;
    .o-content {
      margin-top: 50 * @rate;
      .o-list {
        width: 271 * @rate;
        height: 189 * @rate;
        border-radius: 30 * @rate;
        border: solid 1px #c086ff;
        font-size: 25 * @rate;
        &-1 {
          img {
            width: 66 * @rate;
	          height: 64 * @rate;
            margin-bottom: 19 * @rate;
          }
        }
        &-2 {
          img {
            width: 55 * @rate;
	          height: 66 * @rate;
            margin-bottom: 18 * @rate;
          }
        }
        &-3 {
          img {
            width: 66 * @rate;
	          height: 66 * @rate;
            margin-bottom: 18 * @rate;
          }
        }
        &-4 {
          img {
            width: 66 * @rate;
	          height: 60 * @rate;
            margin-bottom: 21 * @rate;
          }
        }
      }
    }
    .o-btn {
      margin-top: 38 * @rate;
    }
  }

  .section2 {
    padding: 84 * @rate 0 80 * @rate; 
    .t-content {
      margin: 60 * @rate 0;
      .t-list {
        width: 320 * @rate;
        height: 150 * @rate;
        border-right: 1px dashed #fff;
        font-size: 20 * @rate;
        &:last-child {
          border: none;
        }
        &1 {
          img {
            width: 94 * @rate;
            height: 87 * @rate;
            margin-bottom: 30 * @rate;
          }
        }
        &2 {
          img {
            width: 92 * @rate;
            height: 87 * @rate;
            margin-bottom: 30 * @rate;
          }
        }
        &3 {
          img {
            width: 89 * @rate;
            height: 92 * @rate;
            margin-bottom: 28 * @rate;
          }
        }
      }
    }
  }

  .section3 {
    padding: 71 * @rate 0 67 * @rate;
    .th-content {
      margin: 67 * @rate 0 50 * @rate;
      .th-list {
        width: 370 * @rate;
        height: 284 * @rate;
        background-image: linear-gradient(0deg, 
      #8b74ff 0%, 
      #ece8ff 100%);
        border-radius: 0 0 0 60 * @rate;
        color: #6e0ea5;
        .th-list-bg {
          width: 370 * @rate;
          height: 284 * @rate;
          background-image: linear-gradient(0deg, 
          #8b74ff 0%, 
          #ece8ff 100%);
          border-radius: 0 0 0 60 * @rate;
          opacity: 0.2;
          position: absolute;
          left: -8 * @rate;
          top: 8 * @rate;
        }
        &.th-list2 {
          .th-list-top {
            background-color: #8e0101;
            div:last-child {color: #8e0101;}
          }
        }
        &.th-list3 {
          .th-list-top {
            background-color: #7c4102;
            div:last-child {color: #7c4102;}
          }
        }
        &.th-list4 {
          width: 570 * @rate;
          height: 224 * @rate;
          .th-list-b {
            max-height: 140 * @rate;
          }
          .th-list-bg {
            width: 570 * @rate;
            height: 224 * @rate;
          }
          .th-list-top {
            background-color: #e16a46;
            div:last-child {color: #e16a46;}
          }
        }
        &.th-list5 {
          width: 570 * @rate;
          height: 224 * @rate;
          .th-list-b {
            max-height: 140 * @rate;
          }
          .th-list-bg {
            width: 570 * @rate;
            height: 224 * @rate;
          }
          .th-list-top {
            background-color: #a81332;
            div:last-child {color: #a81332;}
          }
        }
        &-top {
          width: 201 * @rate;
          height: 40 * @rate;
          background-color: #a82b12;
          border-radius: 0 0 30 * @rate 0;
          font-size: 25 * @rate;
          div:last-child {
            width: 26 * @rate;
            height: 26 * @rate;
            background-color: #ffffff;
            margin-left: 10 * @rate;
            color: #a82b12;
            border-radius: 50%;
            font-size: 20 * @rate;
          }
        }
        &-b {
          margin-top: 30 * @rate;
          padding-left: 35 * @rate;
          font-size: 16 * @rate;
          line-height: 28 * @rate;
          max-height: 195 * @rate;
          div {
            font-weight: normal;
          }
          div.p-relative {
            font-weight: 800;
          }
          div.p-relative::before {
            content: "";
            width: 4 * @rate;
            height: 4 * @rate;
            border: solid 3 * @rate #691997;
            border-radius: 50%;
            position: absolute;
            left: -17 * @rate;
            top: 50%;
            transform: translateY(-50%);
          }
        }
        &:nth-child(n+4) {
          margin-top: 40 * @rate;
        }
      }
    }
  }

  .section4 {
    padding: 65 * @rate 0 50 * @rate;
    .f-content {
      margin-top: 50 * @rate;
      &-tabs {
        padding: 0 50 * @rate;
        font-size: 20 * @rate;
        .f-tab {
          width: 191 * @rate;
          height: 64 * @rate;
          background-image: linear-gradient(180deg, 
            #c086ff 0%, 
            #6d4dff 100%);
          &-active {
            position: relative;
            height: 80 * @rate;
            top: -8 * @rate;
          }
        }
      }
      &-detail {
        margin-top: -8 * @rate;
        margin-bottom: 43 * @rate;
        .f-detail {
          display: none;
          width: 1200 * @rate;
          height: 228 * @rate;
          font-size: 20 * @rate;
          background-image: url("http://xhd-lx-admin.oss-cn-hangzhou.aliyuncs.com/topic/gaokaohou/yazhou/f-bg.png");
          > div {
            width: 550 * @rate;
            padding-left: 50 * @rate;
            &:first-child {
              margin-right: 30 * @rate;
            }
          }
          .p-relative-circle::before {
            content: "";
            display: block;
            width: 5 * @rate;
            height: 5 * @rate;
            border: 3 * @rate solid #fea4a4;
            border-radius: 50%;
            border-image-slice: 1;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: -20 * @rate;
          }
          &-active {
            display: flex;
          }
          &-tg {
            div {
              width: 100%;
              padding-left: 80 * @rate;
            }
            .p-relative-circle::before {
              left: 60 * @rate;
            }
          }
        }
      }
    }
  }

  .section5 {
    padding: 83 * @rate 0 100 * @rate;
    .fi-content {
      margin-top: 73 * @rate;
      &-tabs {
        // padding: 0 50 * @rate;
        font-size: 20 * @rate;
        .fi-tab {
          width: 220 * @rate;
	        height: 64 * @rate;
          background-color: #ffffff;
	        border-radius: 30 * @rate 30 * @rate 0px 0px;
          box-sizing: border-box;
          &1 {
            color:#a82b12;
          }
          &2 {
            color:#8e0101;
          }
          &3 {
            color:  #a94d31;
          }
          &4 {
            color:   #e16a46;
          }
          &5 {
            color:  #a81332;
          }
          &-active {
            position: relative;
            height: 74 * @rate;
            top: -8 * @rate;
          }
          img {
            width: 54 * @rate;
            height: 36 * @rate;
            margin-right: 10 * @rate;
          }
        }
      }
      &-detail {
        .th-table {
          margin-bottom: 50 * @rate;
          font-size: 20 * @rate;
          .th-table-content {
            border: 1px solid #ccc;
          }
          .th-table-title {
            background: rgb(199, 0, 0);
            height: 1.175rem;
          }
          .th-line {
            border-right: 0.025rem solid #ccc;
            border-bottom: 0.025rem solid #ccc;
            box-sizing: border-box;
            height: 1.3rem;
          }
          .th-border-right {
            border-right: 0.025rem solid #ccc;
            height: 1.3rem;
          }
          .th-line2 {
            height: 2.6rem;
          }
          .th-table-desciption {
            height: 1.3rem;
            text-align: left;
            padding-left: 1.3rem;
          }
          .th-border-bottom {
            border-right: none;
            height: 1.3rem;
          }
          .th-border-bottom-r {
            height: 2.6rem;
          }
          .th-line-fi {
            div {
              width: 100%;
              height: 1.3rem;
              &:first-child {
                border-bottom: 0.025rem solid #ccc;
              }
            }
          }

          &.th-table2 {
            .th-line2 {
              height: 3.9rem;
            }
            .th-border-bottom-r {
              height: 3.9rem;
            }
            .th-line.fx-3 {
              height: 3.9rem;
            }
            .th-line-fi2 {
              border-right: 0.025rem solid #ccc;
              border-bottom: 0.025rem solid #ccc;
            }
            .th-line-fi3 {
              border-bottom: 0.025rem solid #ccc;
            }
          }
        }
      }
      
    }
  }

  .section6 {
    padding: 60 * @rate 0;
    .s-content {
      font-size: 16 * @rate;
      img {
        height: 133 * @rate;
        margin-bottom: 20 * @rate;
      }
      &-title {
        font-size: 36 * @rate;
      }
      &-1 {
        &-contents {
          height: 220 * @rate;
        }
      }
      .s-contain-wraps {
        width: 806 * @rate;
      }
      .s-btn {
        margin-top: 53 * @rate;
      }
    }
  }
  
  .section9 {
    padding: 70 * @rate 0;
    .n-content {
      margin: 48 * @rate 0 43 * @rate;
      .n-list {
        width: 294 * @rate;
        height: 187 * @rate;
        border: solid 1 * @rate #05eefe;
        line-height: 36 * @rate;
        font-size: 16 * @rate;
        overflow: hidden;
        &-img {
          width: 294 * @rate;
          height: 151 * @rate;
        }
      }
    }
  }
  
  .section10 {
    padding: 40 * @rate 0;
    .section-background {
      background-image: url("http://xhd-lx-admin.oss-cn-hangzhou.aliyuncs.com/topic/meiguogaokao/images/n-bg.png");
      background-color: none;
      background-repeat: no-repeat;
    }
    .se-c {
      margin-top: 45 * @rate;
    }
  }
}

@media screen and (min-width:980px) {
  .background {
    .section2 {
      .t-list:nth-child(n+5) {
        margin-top: 22 * @rate;
      }
    }
    .section3 {
      padding-top: 65 * @rate;
      .th-content {
        margin: 67 * @rate 0 50 * @rate;
        &-detail {
          border-radius: 160 * @rate 0px 160 * @rate 0px;
          &-btns {
            top: 34 * @rate;
            right: 25 * @rate;
            div:last-child {
              margin-top: 13 * @rate;
            }
          }
        }
        .th-content3 { 
          .th-detail-name {
            .bg-absolute {
              right: 150 * @rate;
            }
          }
        }
      }
    }
    .section6 {
      .s-bg1 {
        background-image: linear-gradient(0deg, 
      rgba(159, 86, 203, 1) 0%, 
      #f988e7 100%);
        width: 696 * @rate;
        left: -417 * @rate;
        transform: translateX(0);
      }
      .s-bg2 {
        width: 1024 * @rate;
        background-color: #5b48b9;
        opacity: 0.2;
      }
      .s-bg3 {
        background-color: #615bd3;
        opacity: 0.4;
        left: -417 * @rate;
        transform: translateX(0);
      }
      .s-bg4 {
        width: 696 * @rate;
        background-image: linear-gradient(0deg, 
      #3fbbfe 0%, 
      #a541ff 100%);
        right: -417 * @rate;
        top: 0;
        bottom: 0;
      }
    }
    .section7 {
      .se-content {
        border-right: none;
        .se-tabs {
          .se-tab {
            &.se-active::before {
              left: 0;
              top: 50%;
              transform: translate(-100%,-50%);
            }
            &.se-tab1 {
              &.se-active::before {
                border-right-color: #00f1fe;
              }
            }
            &.se-tab2 {
            &.se-active::before {
              border-right-color:  #fb7098;
            }
            }
            &.se-tab3 {
              &.se-active::before {
                border-right-color: #e353e0;
              }
            }
            &.se-tab4 {
            &.se-active::before {
              border-right-color:  #0ee3ab;
            }
            }
          }
        }
      }
    }
  }
}
@media screen and (max-width:979px) {
  .background  {
    background-image: url("http://xhd-lx-admin.oss-cn-hangzhou.aliyuncs.com/topic/gaokaohou/yazhou/bg-m.png");
    padding-top: 598 * @rate;
    .container {
      width: 750 * @rate;
    }
    .btn {
      width: 330 * @rate; 
    }
    #tab::after {
      width: 750 * @rate;
    }
    .tab {
      width: 750 * @rate;
      padding: 0 20* @rate;
    }
    .se-title {
      font-size: 40 * @rate;
      img {
        width: 101 * @rate;
        height: 35 * @rate;
        margin-top: 4 * @rate;
        &.se-img1-55 {
          margin-right: 25 * @rate;
        }
        &.se-img2-55 {
          margin-left: 25 * @rate;
        }
        &.se-img1-50 {
          margin-right: 20 * @rate;
        }
        &.se-img2-50 {
          margin-left: 20 * @rate;
        }
      }
    }
    .section1 {
      .o-content {
        margin: 40*@rate 20 * @rate 0;
        flex-wrap: wrap;
        .o-list {
          width: 351 * @rate;
          height: 201 * @rate;
          &:nth-child(n+3) {
            margin-top: 12 * @rate;
          }
        }
      }
    }

    .section2 {
      .t-content {
        margin: 63 * @rate 10 * @rate 65 * @rate;
        .t-list {
          width: 357 * @rate;
          height: 222 * @rate;
          &:nth-child(n+3) {
            margin-top: 24 * @rate;
          }
        }
      }
    }

    .section3 { 
      .se-title {
        img {
          margin: 8 * @rate 5 * @rate 0;
        }
      }
      .th-content {
        margin: 30 * @rate 10 * @rate 50 * @rate;
        .th-list {
          width: 345 * @rate;
          height: 356 * @rate;
          &-b {
            margin-top: 10 * @rate;
            max-height: 260 * @rate !important;
          }
          .th-list-bg {
            width: 345 * @rate;
            height: 324 * @rate;
          }
          &.th-list4 {
            width: 345 * @rate;
            height: 324 * @rate;
            .th-list-bg {
              width: 345 * @rate;
              height: 324 * @rate;
            }
            .th-list-b {
              max-height: 250 * @rate;
            }
          }
          &.th-list5 {
            width: 716 * @rate;
            height: 148 * @rate;
            .th-list-bg {
              width: 716 * @rate;
              height: 148 * @rate;
            }
            .th-list-b {
              max-height: 80 * @rate;
              > div:first-child {
                width: 220 * @rate;
                margin-right: 10 * @rate;
              }
            }
            .section-contain {
              width: 716 * @rate;
            }
          }
        }
      }
    }

    .section4 {
      .se-title {
        .se-img1-50 {
          margin-right: 5 * @rate;
        }
        .se-img2-50 {
          margin-left: 5 * @rate;
        }
      }
      .f-content {
        margin: 50 * @rate 10* @rate 43 * @rate;
        &-tabs {
          padding: 0 10 * @rate;
          .f-tab {
            width: 131 * @rate;
            div {
              width: 100%;
              height: 100%;
              transform: scale(0.8);
              white-space: nowrap;
            }
          }
        }
        &-detail {
          .f-detail {
            width: 728 * @rate;
            height: 367 * @rate;
            background-image: url("http://xhd-lx-admin.oss-cn-hangzhou.aliyuncs.com/topic/gaokaohou/yazhou/f-bg-m.png");
            flex-direction: column;
            > div {
              width: 700 * @rate;
              margin-left: 5 * @rate;
              &:first-child {
                margin-right: 0;
              }
            }
            &-active {
              display: flex;
            }
            &.f-detail4 .p-relative-circle::before {
              left: 20 * @rate;
            }
            &-tg {
              div {
                width: 100%;
                padding-left: 80 * @rate;
              }
              .p-relative-circle::before {
                left: 60 * @rate;
              }
            }
          }
        }
      }

    }
    .section5 {
      .fi-content {
        margin: 73 * @rate 10 * @rate;
        &-tabs {
          .fi-tab {
            width: 140 * @rate;
            div {
              transform: scale(0.8);
              width: 140 * @rate;
              height: 64 * @rate;
              line-height: 64 * @rate;
              display: flex;
              justify-content: center;
              align-content: center;
              white-space: nowrap;
            }
            img {
              position: absolute;
              top: -10 * @rate;
              left: 50%;
              transform: translate(-50%,-100%);
            }
            &-active {
              top: -4 * @rate;
            }
          }
        }

        
  .th-table-title {
    background: rgb(199, 0, 0);
    line-height: 1.25rem;
  }

  .th-line {
    border-right: 0.05rem solid #ccc;
    border-bottom: 0.05rem solid #ccc;
    box-sizing: border-box;
    height: 2.088rem;
    line-height: 2.088rem;
  }

  .th-line-wrap {
    line-height: 0.65rem;
    width: 100%;
  }

  .th-border-right {
    border-right: 0.05rem solid #ccc;
    line-height: 2.088rem;
  }

  .th-line2 {
    height: 4.176rem;
    line-height: 4.176rem;
  }

  .th-table-desciption {
    line-height: 2.088rem;
    text-align: left;
    padding-left: 1.088rem;
  }

  .th-border-bottom {
    border-right: none;
    line-height: 2.088rem;
  }

  .th-border-bottom-r {
    line-height: 4.176rem;
  }
        
      }
    }
    .section6 {
      .s-content {
        &-1 {
          flex-wrap: wrap;
          &-contents {
            width: 750 * @rate;
            height: 70 * @rate;
          } 
        }
        &-title {
          font-size: 30 * @rate;
        }
        .s-contain-wraps {
          width: 720 * @rate;
          height: 226 * @rate;
          text-align: center;
          margin: 0 10 * @rate;
        }
        .s-content-title-m1 {
          background-image: linear-gradient(0deg, rgba(159, 86, 203, 1) 0%, 
        #f988e7 100%);
        }
        .s-content-title-m2 {
          font-size: 30 * @rate;
          background-image: linear-gradient(0deg, #3fbbfe 0%, #a541ff 100%);
        }
      }
    }
    .section9 {
      .n-content {
        margin: 48 * @rate 12 * @rate 43 * @rate;
        .n-list {
          width: 358 * @rate;
          height: 228 * @rate;
          line-height: 42 * @rate;
          font-size: 19 * @rate;
          &-img {
            width: 358 * @rate;
            height: 185 * @rate;
          }
        }
      }
    }
    .section10 {
      .section-background {
        background-image: url("http://xhd-lx-admin.oss-cn-hangzhou.aliyuncs.com/topic/meiguogaokao/images/n-bg-m.png");
      }
    }
  }
}